<template>
  <section class="section cases-section">
    <div class="container">
      <h2 class="section-title">合作案例</h2>
      <p class="section-desc">与众多知名企业达成战略合作</p>
      
      <div class="cases-grid">
        <div class="case-item" v-for="(item, index) in caseItems" :key="index">
          <img :src="item.image" :alt="item.name">
          <div class="case-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'CasesGrid',
  data() {
    return {
      caseItems: [
        { name: '客户案例1', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例2', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例3', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例4', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例5', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例6', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例7', image: 'https://via.placeholder.com/300x200' },
        { name: '客户案例8', image: 'https://via.placeholder.com/300x200' }
      ]
    }
  }
}
</script>

<style scoped>
.cases-section {
  background-color: #f0f5ff;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.case-item {
  position: relative;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.case-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.case-item:hover img {
  transform: scale(1.1);
}

.case-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(5, 58, 112, 0.8);
  color: white;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  transition: background 0.3s ease;
}

.case-item:hover .case-name {
  background: rgba(5, 58, 112, 1);
}
</style>